<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://paycn.com.cn/pos" prefix="p"%>

<link href="<c:url value="/static/css/select2_metro.css"/>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<c:url value="/static/js/select2.min.js"/>"></script>

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3 class="page-title">用户管理</h3>
			<ul class="breadcrumb">
				<li>
					<i class="icon-home"></i>
					<a href="<c:url value="/home.html"/>">首页</a> 
					<i class="icon-angle-right"></i>
				</li>
				<li><a href="#">用户管理</a></li>
			</ul>
		</div>
	</div>
	
	<div class="row-fluid">
		<div class="span12">
			<c:choose>
				<c:when test="${messageError!=null }">
					<div class="alert alert-error">
						<strong>失败!</strong> ${messageError }
					</div>
				</c:when>
				<c:when test="${messageSuccess!=null }">
					<div class="alert alert-success">
						<strong>成功!</strong> ${messageSuccess }
					</div>
				</c:when>
			</c:choose>
			<div class="portlet">
				<div class="portlet-title">
					<div class="caption"><i class="icon-search"></i> 查询</div>
					<div class="tools">
						<a class="collapse" href="javascript:;"></a>
					</div>
				</div>
				<div class="portlet-body" >
					<form class="form-inline" action="<c:url value="/member/query.html"/>">
					<div class="row-fluid">
						<div class="span2 query">
							<div class="control-group">
								<label class="control-label">用户名</label>
								<div class="controls">
									<input type="text" name="member.username" value='${param["member.username"] }' class="m-wrap span12">
								</div>
							</div>
						</div>
						<div class="span2 query">
							<div class="control-group">
								<label class="control-label">姓名</label>
								<div class="controls">
									<input type="text" name="member.realName" value='${param["member.realName"] }' class="m-wrap span12">
								</div>
							</div>
						</div>
						<div class="span2 query">
							<div class="control-group">
								<label class="control-label">部门</label>
								<div class="controls">
									<input type="text" name="member.dept" value='${param["member.dept"] }' class="m-wrap span12">
								</div>
							</div>
						</div>
						<div class="span2 query">
							<div class="control-group">
								<label class="control-label">角色</label>
								<div class="controls">
									<select name="role.id" class="m-wrap span12 chosen-select">
										<option value="">-</option>
										<c:forEach items="${roleMap }" var="m">
											<c:forEach items="${m.value }" var="role">
												<option value="${role.id }">${role.name }</option>
											</c:forEach>
										</c:forEach>
									</select>
								</div>
							</div>
						</div>
						<div class="span2 query">
							<div class="control-group">
								<label class="control-label">状态</label>
								<div class="controls">
									<select name="member.status" class="span12 m-wrap">
										<option value="">-</option>
										<option value="ACT" <c:if test="${param['member.status'] == 'ACT'}">selected="selected"</c:if> >激活</option>
										<option value="LCK" <c:if test="${param['member.status'] == 'LCK'}">selected="selected"</c:if> >锁定</option>
									</select>
								</div>
							</div>
						</div>
						<div class="span2 query">
							<div class="control-group">
								<label class="control-label">&nbsp;</label>
								<div class="controls">
									<button type="submit" class="btn blue purple-stripe"><i class="icon-search"></i> 查询</button>
								</div>
							</div>
						</div>
					</div>
					</form>
					
				</div>
			</div>
		</div>
	</div>
	
	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box grey">
				<div class="portlet-title">
					<div class="caption"><i class="icon-bookmark"></i> 用户</div>
					<div class="actions">
						<a class="btn green" href="<c:url value="/member/add.html"/>"><i class="icon-plus"></i> 添加用户</a>
					</div>
				</div>
				<div class="portlet-body no-more-tables">
					<table class="table table-bordered table-striped table-hover">
						<thead>
							<tr>
								<th>用户名</th>
								<th>姓名</th>
								<th>电话</th>
								<th>部门</th>
								<th>角色</th>
								<th>状态</th>
								<th>创建日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${dataGrid.rows }" var="row">
								<tr>
									<td data-title="用户名">${row.username }</td>
									<td data-title="姓名">${row.realName }&nbsp;</td>
									<td data-title="电话">${row.tel }&nbsp;</td>
									<td data-title="部门">${row.dept }&nbsp;</td>
									<td data-title="角色">
									
										<ul class="inline">
  											<c:forEach items="${row.roles }" var="r" varStatus="i">
												<c:choose>
													<c:when test="${i.last }"><li>${r.name }</li></c:when>
													<c:otherwise><li>${r.name }</li></c:otherwise>
												</c:choose>
											</c:forEach>
										</ul>
									
										
									</td>
									<td data-title="状态">
										<c:if test="${row.status == 'LCK' }"><span class="label">已锁定</span></c:if>
										<c:if test="${row.status == 'ACT' }">已激活</c:if>
										<c:if test="${row.status == 'DEL'}">已删除</c:if>&nbsp;
									</td>
									<td data-title="创建日期"><fmt:formatDate value="${row.createdDate }" pattern="yyyy-MM-dd HH:mm:ss" />&nbsp;</td>
									<td data-title="操作">
										<a href="<c:url value="/member/${row.id}/edit.html"/>" class="btn mini blue"><i class="icon-edit"></i> 修改</a>
										<a href="<c:url value="/member/${row.id}/password.html"/>" class="btn mini black repassword"><i class="icon-pencil"></i> 修改密码</a>
										<a href="<c:url value="/member/delete.html?id=${row.id}"/>" class="btn mini red remote-confirm"><i class="icon-trash"></i> 删除</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
		            <p:pagination url="/member/query.html" total="${dataGrid.total }"/>
				</div>
			</div>
		</div>
	</div>

</div>

<div id="member-password" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"></button>
		<h4>修改密码</h4>
	</div>
	<div class="modal-body">
		<form method="post" id="member-password-form" class="form-horizontal">
			<div class="alert alert-error hide">请检查下面的错误</div>
		
			<div class="control-group">
				<label class="control-label">新密码:</label>
				<div class="controls">
					<input type="password" name="newPassword" id="member-newPassword" class="m-wrap medium">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">重输密码:</label>
				<div class="controls">
					<input type="password" name="confirmPassword" class="m-wrap medium">
				</div>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn green ensure">确定</button>
		<button type="button" data-dismiss="modal" class="btn">取消</button>
	</div>
</div>

<div id='member-remove' class='modal hide fade' tabindex='-1' 
	data-backdrop='static' data-keyboard='false'>
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"></button>
		<h4>删除用户</h4>
	</div>
	<div class='modal-body'>
		<h5>是否删除用户？</h5>
		<form method="post" id="member-remove-form"></form>
	</div>
	<div class='modal-footer'>
		<button type='button' class='btn green ensure'>确定</button>
		<button type='button' data-dismiss='modal' class='btn'>取消</button>
	</div>
</div>


<script type="text/javascript">
function remote_confirm(evn){
	evn.preventDefault();
	evn.stopPropagation();
	
	$("#member-remove").on("hidden", function(){
		$(this).find("form").removeAttr("action");
	});
	
	var url = $(this).attr("href");
	$("#member-remove-form").attr("action", url);
	$("#member-remove").modal("show");
}

function member_repassword(evn){
	evn.preventDefault();
	evn.stopPropagation();
	
	$("#member-password").on("hidden", function(){
		var $this = $(this);
		$this.find(".control-group").removeClass("success");
		$this.find(".control-group").removeClass("error");
		$this.find(".controls .help-inline").remove();
		$this.find("input[name=newPassword]").val("");
		$this.find("input[name=confirmPassword]").val("");
		$this.find("form").removeAttr("action");
		$this.find(".alert").hide();
	});
	var url = $(this).attr("href");
	$("#member-password-form").attr("action", url);
	$("#member-password").modal("show");
}

function member_repassword_submit(){
	$("#member-password-form").submit();
}

function member_remove_submit(){
	$("#member-remove-form").submit();
}

$(document).ready(function(){
	$(".chosen-select").select2({
		placeholder: "选择角色",
		formatNoMatches: function(){
			return "未找到匹配项";
		}
	});

	$(".remote-confirm").bind("click", remote_confirm);
	$(".repassword").bind("click", member_repassword);
	$("#member-password .ensure").bind("click", member_repassword_submit);
	$("#member-remove .ensure").bind("click", member_remove_submit);
	
	var form = $("#member-password-form");
    var error = $(".alert-error", form);
    
    form.validate({
		errorElement : "span",
		errorClass: "help-inline",
		rules: {
			newPassword: "required",
			confirmPassword: {
				required: true,
				equalTo: "#member-newPassword"
			}
		},
		messages: {
			newPassword: {
				required: "请输入新密码",
			},
			confirmPassword: {
				required: "请再次输入密码",
				equalTo: "两次输入的密码不一致"
			}
		},
		invalidHandler: function (event, validator) { //display error alert on form submit              
            error.show();
        },
        highlight: function (element) { // hightlight error inputs
            $(element).closest(".help-inline").removeClass("ok"); // display OK icon
            $(element).closest(".control-group").removeClass("success").addClass("error"); // set error class to the control group
        },
        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest(".control-group").removeClass("error"); // set error class to the control group
        },
        success: function (label) {
            label.addClass("valid").addClass("help-inline ok").closest(".control-group").removeClass("error").addClass("success"); // set success class to the control group
        },
        submitHandler: function (form) {
            form.submit();
        }
	});
});
</script>
